<template>
    <div>
        <van-field :name="name" :label="label">
            <template #input>
                <van-radio-group v-model="radio" :direction="direction" @change="handleChange">
                    <van-radio
                            v-for="(item,index) in dict"
                            :key="index"
                            :name="item.value"
                            shape="square">
                        {{ item.text }}
                    </van-radio >
                </van-radio-group>
            </template>
        </van-field>
    </div>
    
</template>

<script>
    export default {
        name: "AppCheckbox",
        props:{
            label:{
                type:String,
                default:'',
                required:false
            },
            value:{
                type:String,
                required:false
            },
            dict:{
                type:Array,
                default:()=>[],
                required:true
            },
            name:{
                type:String,
                default:'',
                required:false
            },
            direction:{
                type:String,
                default:'horizontal',
                required:false
            }
        },
        data(){
            return {
                radio:""
            }
        },
        watch:{
            value:{
                immediate:true,
                handler(){
                    if(!this.value){
                        this.radio = []
                    }else{
                        this.radio=this.value
                    }
                }
            }
        },
        methods:{
            handleChange(obj){
                this.$emit('change',obj)
            }
        },
        model: {
            prop: 'value',
            event: 'change'
        }
    }
</script>

<style scoped>
    .van-checkbox--horizontal {
        margin-bottom: 5px;
    }
</style>